<template>
  <div class="page" @touchmove.stop.prevent="onMove" @touchstart.stop.prevent="onStart" @touchend.stop.prevent="onEnd">
    <!--div class="page-item p2">
      <div class="page-front"></div>
    </div-->
    <div class="page-item p1">
      <div class="page-front" :style="rect.front">
        <img src="../../images/page-1.jpg" alt="" class="blockImg" />
      </div>
      <div class="page-back" :style="rect.back">
        <img src="../../images/page-2.jpg" alt="" class="blockImg" />
      </div>
    </div>
  </div>
  <button @click="add" style="position:fixed;left:0px;top:200px;">操作1</button>
  <button @click="add2" style="position:fixed;left:100px;top:200px;">操作2</button>
</template>
<script>
import Flip from './class/Flip.js'
export default {
  data() {
    return {
      list: [],
      rect: {},
      url: 'https://www.baidu.com'
    }
  },
  methods: {
    onLink1() {
      location.href = this.url
    },
    onLink2() {
      window.open(this.url, '_blank')
    },
    add(e) {
      /*console.log(e)*/
      /*let { offsetX, offsetY } = e*/
      //y轴颠倒
      /*let point = [offsetX - 50, 50 - offsetY]*/

      this.fp.toLeft((res) => {
        this.rect = res
      })
    },
    add2() {
      this.fp.toRight((res) => {
        this.rect = res
      })
    },
    onStart(e) {
      this.isStart = true
      this.fp.s_point = this.getPoint(e)
      this.fp.e_point = this.fp.s_point
    },
    onEnd(e) {
      this.isStart = false
      this.fp.toEnd((res) => {
        this.rect = res
      })
    },
    getPoint(e) {
      let { x, y } = e.target.getBoundingClientRect()
      let [touch] = e.touches
      x = 8
      y = 8
      //console.log(touch)
      let { clientX, clientY } = touch
      let point = [clientX - x - 50, clientY - y - 50]
      return point
    },
    onMove(e) {
      if (this.isStart) {
        //console.log(e)
        let point = this.getPoint(e)
        this.fp.e_point = point
        this.fp.calculate((res) => {
          this.rect = res
        })
      }
    },
    test_1() {
      console.log('右边上区域')
      let e_point = [40, -40]
      let s_point = [50, -50]

      this.fp.s_point = s_point
      this.fp.e_point = e_point
      let rect = this.fp.calculate()
      console.log(`rect`, rect)
      this.rect = rect
    },
    test_2() {
      console.log('右上线')
      let point = [40, -50]
      this.fp.e_point = point
      let rect = this.fp.calculate()

      console.log(`rect`, rect)
      this.rect = rect
    },
    test_3() {
      console.log('垂直线1')
      let s_point = [50, -50]
      let e_point = [40, -50]

      this.fp.s_point = s_point
      this.fp.e_point = e_point
      let rect = this.fp.calculate()
      console.log(`rect`, rect)
      this.rect = rect
    },
    test_4() {
      console.log('右下角45deg')
      let e_point = [40, -60]
      let s_point = [50, -50]

      this.fp.s_point = s_point
      this.fp.e_point = e_point
      this.fp.calculate((res) => {
        this.rect = res
      })
    },
    test_5() {
      console.log('右下角45deg')
      let e_point = [40, -60]
      let s_point = [40, -50]

      this.fp.s_point = s_point
      this.fp.e_point = e_point
      this.fp.calculate((rect) => {
        console.log(`rect`, rect)
        this.rect = rect
      })
    },
    test_6() {
      console.log(`测试层级问题`)
      console.log(this.fp.getZ())
    }
  },
  mounted() {
    this.fp = new Flip({
      page: 1,
      total: 1000
    })
    /*this.test_1()*/
    //this.test_2()
    //this.test_3()
    //this.test_4()
    //this.test_5()
    this.test_6()
  }
}
</script>
<style type="text/css" lang="scss">
.blockImg {
  display: block;
  width: 100%;
  height: 100%;
}
body {
  margin: 0;
}
.page {
  height: 100vh;
  overflow: hidden;
  width: 100vw;
  position: fixed;
  &-item {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 200px;
    top: 50px;
    &.p2 {
      .page-front {
        background: #ff000033;
      }
    }
  }
  &-front {
    background: grey;
    width: 100px;
    height: 100px;
    position: absolute;
    box-sizing: border-box;
    //background: url('../../images/p2.jpg') 0 0 / 100% 100% no-repeat;
  }
  &-back {
    width: 100px;
    height: 100px;
    position: absolute;
    box-sizing: border-box;
    background: #9a9af1;
    //background: url('../../images/p2.jpg') 0 0 / 100% 100% no-repeat;
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    &:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      opacity: 0.3;
    }
    img {
      transform: scale(-1, 1);
    }
  }
}
</style>
